import React, { Component } from 'react';
import { connect } from 'react-redux';
import { updateData } from "../reducer/index";

let player;
class Play extends Component{
  render() {
    let { isHide } = this.props;
    this._play();
    return (
      <div className={`play-msk ${isHide ? "hide" : ""}`} >
        <div className="show-player">
          <div className='play-top'>
            <span className='play-title'>查看监控</span>
            <span className='cloe-play' onClick={this._close}>×</span>
        </div>
        <div className='play' id='play'></div>
        </div>  
    </div>);
  }

  _play = () => {
    let { play_info,isHide } = this.props;
    let { deviceId, channelId, type, kitToken } = play_info;

    if (!isHide) {
      
      player = new window.ImouPlayer("#play");
      // 播放器初始化
      player.setup({
        src: [{
          // url拼接说明请见：1.3 轻应用播放地址说明
          url: `imou://open.lechange.com/${deviceId}/${channelId}/${type}?streamId=1`,
          // 播放Token，通过接口getKitToken获取，具体请见：1.4 getKitToken接口协议说明 
          kitToken,
        }], // 播放地址
        width: 760, // 播放器宽度
        height: 500, // 播放器高度
        poster: '', // 封面图url
        autoplay: false, // 是否自动播放
        controls: true, // 是否展示控制栏
      });
    }
  }

  _close = () => { 
    player.destroy();
    updateData({
      isHide: true
    });
  }
}

const mapStateToProps = (state) => {
  return {
    play_info: state.play_info,
    isHide: state.isHide
  };
};
export default connect(mapStateToProps)(Play);